<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title><br />
		<script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/vue-router-2.7.0.js" type="text/javascript" charset="utf-8"></script>
		<!--1. 安装 vue-router 路由模块-->
		<style>
			/*1.高亮   .router-link-active*/
			 .router-link-active,.myactive{
			 	background-color: #F7E1B5;
			 	color: #060;
			 }
			 .v-enter,.v-leave-to{
			 	opacity: 0;
			 	transform: translateX(250px);
			 }
			 .v-enter-active,.v-leave-active{
			 	transition: 0.5s;
			 }
		</style>
	</head>
	<body>
		<div id="app">
			<!--<a href="#/login">登录</a>
			<a href="#/register">注册</a>-->
			<router-link to="/login?id=10&name=ss">登录</router-link>
			<router-link to="/register/12/ls">注册</router-link>
			<transition mode="out-in">
				<router-view></router-view>
			</transition>
		</div>
		<script type="text/javascript">
			var login={
				template:'<h1>登录组件----{{$route.query.id}}----{{$route.query.name}}</h1>',
				created(){
//					console.log(this.$route.query.id)
					console.clear()
					console.log(this.$route)
				}
			}
			
			var register={
				template:'<h1>注册组件---{{$route.params.id}}----{{$route.params.name}}</h1>',
				created(){
					console.clear()
					console.log(this.$route)
				}
			}
			//2.创建一个路由对象，当 导入vue-router 包之后， 在 window 全局对象中，就有了一个
			//路由的构造函数，叫做 VueRouter
			//在 new 路由对象的时候，可以为构造函数，传递一个配置对象
			var routerObj=new VueRouter({
				routes:[//这个配置对象中的 route表示 路由匹配规则的意思
				//每个路由规则，都是一个对象，这个规则对象，有两个必须的属性：
				//属性1 是 path，表示监听 哪个路由链接地址；
				//属性2 是component，表示，如果 路由是前面匹配到的 path ，则展示 component属性对应的那个组件
					{path:'/',redirect:'/login'},//重新  初始链接地址为login
					{path:'/login',component:login},
					{path:'/register/:id/:name',component:register}
				],
				linkActiveClass:'myactive'//2.高亮    默认激活类
			})
			new Vue({
				el:"#app",
				router:routerObj
			});
		</script>
	</body>
</html>
